import React from "react";
import styles from "../css/order.module.css";
import { Card } from "antd-mobile";
import { useDispatch, useSelector } from "react-redux";
import { addSeat } from "../../../store/slice/orderSlice";

function ChooseSeat() {
  let psgArr = useSelector((store) => store.order.psgArr);
  let setArr = useSelector((store) => store.order.setArr); 
  let seatL = ["a", "b", "c"];
  let seatR = ["d", "f"];

  const isActive = (seat) => {
    return setArr.includes(seat) ? "active" : "";
  };
  let dis = useDispatch();
  const choose = (seat) => {
    dis(addSeat(seat));
  };
  return (
    <div
      className={styles.seatbox}
      style={{ display: psgArr.length == 0 ? "none" : "block" }}
    >
      <Card title="在线选座">
        <div className={styles.row}>
          <div>窗</div>
          <div className={styles.seat}>
            {psgArr.map((item, index) => (
              <div key={index}>
                {seatL.map((v, i) => (
                  <span key={i}>
                    <span
                      onClick={() => choose(index + "-" + v)}
                      className={[
                        "iconfont icon-seat" + v,
                        isActive(index + "-" + v),
                      ].join(" ")}
                    ></span>
                  </span>
                ))}
              </div>
            ))}
          </div>
          <div>过道</div>
          <div className={styles.seat}>
            {psgArr.map((item, index) => (
              <div key={index}>
                {seatR.map((v, i) => (
                  <span key={i}>
                    <span
                      onClick={() => choose(index + "-" + v)}
                      className={[
                        "iconfont icon-seat" + v,
                        isActive(index + "-" + v),
                      ].join(" ")}
                    ></span>
                  </span>
                ))}
              </div>
            ))}
          </div>
          <div>窗</div>
        </div>
      </Card>
    </div>
  );
}

export default ChooseSeat;
